<template>
<span inline-block style="position:relative;overflow:hidden;" :style="{height:`${height}px`}">
    <span v-for="(item, index) in items" :key="index" inline-block ellipsis long style="position:absolute;left:0;top:0;"
        :style="{'margin-top':`${item.marginTop||height}px`}" >
        <router-link :to="{name:'article-detail',params:{systemtype:3,id:item.id}}" white linkable-white>
            {{ item.title }}
        </router-link>
    </span>
</span>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import animate from '../../lib/animate'

@Component
export default class Marquee extends AbpBase{
    @Prop() items:any;
    height:Number = 40;
    createAnimate(item) {
        animate.push({
            target: item,
            prop: "marginTop",
            keyFrames: [
                { value: this.height, duration: 0 },
                { value: -0.1, duration: 500 },
                { value: -0.1, duration: 3000 },
                { value: -this.height, duration: 500 },
            ],
            interpolationType: "fade",
            loopType: "none"
        });
    }
    created() {
        var i = 0;
        var that = this;
        window.animate = animate;
        function doSomething() {
            if(that.items.length == 0) return;
            var item = that.items[i % that.items.length];
            if(that.items.length == 1) {
                that.$set(item, 'marginTop', -0.1);
            }else {
                that.$set(item, 'marginTop', that.height);
                that.createAnimate(item);
            }
            i++;
        }
        
        doSomething();
        setInterval(doSomething, 4000);
    }
}
</script>

<style>

</style>
